<template>
  <div class="home">
    <div class="home-head">
      <div>
        <span class="home-head-a">—————</span>
        <h4>贝巍小站</h4>
        <span class="home-head-b">—————</span>
      </div>
    
      <ul>
        <li
          :class="index === nowIndex ? 'home-active' : ''"
          @click="fnNow(index)"
          v-for="(item, index) in arrList"
          :key="index"
        >
          <router-link :to="item.to">
            <i :class="item.icon"></i>{{ item.name }}</router-link
          >
        </li>
      </ul>
    </div>
    <div>
 
    </div>
    <div class="home-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  data() {
    return {
      arrList: [
        {
          icon: "el-icon-s-home",
          to: "home",
          name: "首页",
        },
    
        {
          icon: "el-icon-ice-cream-round",
          to: "confession",
          name: "表白",
        },
        {
          icon: "el-icon-picture-outline",
          to: "photo",
          name: "相册",
        },
        {
          icon: "el-icon-ship",
          to: "matter",
          name: "100件小事",
        },
            {
          icon: "el-icon-warning-outline",
          to: "about",
          name: "关于",
        },
      ],
      nowIndex: 0,
      components:{
 
      }
    };
  },
  methods: {
    fnNow(i) {
      this.nowIndex = i;
      console.log(i);
    },
  },
});
</script>

<style>
.home-active {
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 10px;
  background: rgb(241, 241, 241);
  animation: home-active 0.2s ease-in-out;
}
@keyframes home-active {
  from {
    transform: translate(-20px);
  }
  to {
    transform: translate(0);
  }
}

.home-head-a {
  position: absolute;
  top: -7px;
  left: 32px;
  animation: head-a 1s ease-in-out;
}
@keyframes head-a {
  from {
    transform: translate(40px);
  }
  to {
    transform: translate(0);
  }
}
.home-head-b {
  position: absolute;
  bottom: -2px;
  left: 32px;
  animation: head-b 1s linear;
}
@keyframes head-b {
  from {
    transform: translate(-40px);
  }
  to {
    transform: translate(0);
  }
}
.home {
  width: 100%;
  height: 55px;
  background: rgb(219, 145, 164);
}
.home-content {

  clear: both;
  width: 850px;
  margin: 0 auto;
}
.home-head {
  position: relative;
  height: 35px;
  padding: 10px 0;
  width: 900px;
  margin: 0 auto;
}
.home-head > ul {
  width: 100%;
  line-height: 40px;
  padding-left: 150px;
}
.home-head > ul > li {
  text-align: center;
  /* line-height: 40px; */
  /* width: 140px; */
  margin-left: 60px;
  float: left;
  font-size: 14px;
}
.home-head > ul > li > a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.home-head > div {
  position: relative;
  position: absolute;
  top: 3px;
  left: 0;
  text-align: center;
  width: 150px;
  height: 50px;
  float: left;

}
.home-head > div > h4 {
  margin-left: 15px;
  margin-top: 5px;
  font-weight: "幼圆";
  font-size: 20px;
  line-height: 40px;
  width: 120px;
  text-align: center;
  height: 30px;
  float: left;
  animation: home-h4 1s ease-in-out;
}
@keyframes home-h4{
  from{
    transform: scale(0,0)
  }
  to{
    transform: scale(1,1)
  }
}
</style>